<template>
  <div class="line-list-layout">
    <ul class="bus-list">
      <li class="bus-detail" v-for="(item,index) in lineList.lines" @click="toDetail(item)">
        <div class="meg">
          <span class="num">{{item.lineName}}路</span>
          <span class="start">{{item.startStopName}}</span>
          <i class="fa fa-long-arrow-right arrow" aria-hidden="true"></i>
          <span class="end">{{item.endStopName}}</span>
        </div>
        <div class="coming">
          <div>
            <i class="icon-come"></i>
            <span class="come-txt">{{item.commingBusArray[0].distance}}</span>
          </div>
          <div>
            <i class="icon-come"></i>
            <span class="come-txt">{{item.commingBusArray[1].distance}}</span>
          </div>
        </div>
      </li>
    </ul>
    <div class="bus-tool">
      <vBanner></vBanner>
    </div>
  </div>
</template>
<script>
  import vBanner from '../components/banner/banner.vue'

  export default {
    data() {
      return {
        lineList: []
      }
    },
    mounted() {
      this.onReady()
    },
    components: {vBanner},
    methods: {
      onReady() {
        let lineList = JSON.parse(localStorage.getItem('lineList'))
        if (lineList) {
          this.lineList = lineList
        }
      },
      toDetail(item) {
        localStorage.setItem('lineDetail', JSON.stringify(item))
        this.$router.push({path: '/lineDetail'})
      }
    }
  }
</script>
<style scoped>
  @import "../assets/css/lineList.css";
</style>
